<template>
  <view class="container">
    <!-- 二维码顶部居中放大 -->
    <view v-if="orderData.productQRcode" class="qrcode-section">
      <image :src="getFullQrcodeUrl(orderData.productQRcode)" class="qrcode-img" mode="aspectFit" />
      <text class="qrcode-tip">扫码提货/核销</text>
    </view>
    <view class="order-detail-card">
      <text class="order-title">订单号: {{ orderData.outTradeNo }}</text>
      <text class="order-detail">商品清单: {{ orderData.productList }}</text>
      <text class="order-detail">收货人: {{ orderData.name }}（{{ orderData.phone }}）</text>
      <text class="order-detail">收货地址: {{ orderData.address }}</text>
      <text class="order-detail">金额: ¥{{ orderData.amount }}</text>
      <text class="order-status">状态: {{ formatProductOrderStatus(orderData.status) }}</text>
    </view>
    <view v-if="noticeContent" class="notice-bar">
      <text>{{ noticeContent }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getNoticeList } from '@/api/content/banner'

const orderData = ref({})
const noticeContent = ref('')

onLoad((options) => {
  if (options.data) {
    orderData.value = JSON.parse(decodeURIComponent(options.data))
  }
})

onMounted(async () => {
  try {
    const res = await getNoticeList()
    if (res.code === 200 && Array.isArray(res.data)) {
      const type2Notice = res.data.find(item => item.noticeId === 3)
      if (type2Notice) {
        noticeContent.value = type2Notice.notice
      }
    }
  } catch (err) {
    console.error('获取公告失败:', err)
  }
})

const getFullQrcodeUrl = (path) => {
  if (path && !/^https?:\/\//.test(path)) {
    return 'https://zhihu.xmjsy.com' + path
  }
  return path
}

const formatProductOrderStatus = (status) => {
  const map = {
    'PENDING': '待支付',
    'PAID': '已支付',
    'CONPLETED': '已完成',
    'CANCELLED': '已取消'
  }
  return map[status] || status
}
</script>

<style scoped>
.container {
  padding: 32rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.qrcode-section {
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  text-align: center;
}
.qrcode-img {
  width: 360rpx;
  height: 360rpx;
  display: block;
  margin: 0 auto 16rpx auto;
}
.qrcode-tip {
  font-size: 26rpx;
  color: #999;
}
.order-detail-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 0 0 32rpx 0;
  box-shadow: 0 4rpx 16rpx rgba(255,204,0,0.08);
}
.order-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}
.order-detail {
  font-size: 28rpx;
  margin-bottom: 8rpx;
  color: #666;
  display: block;
}
.order-status {
  font-size: 28rpx;
  color: #ffcc00;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
}
.notice-bar {
  background-color: #fffbe6;
  padding: 16rpx;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
.notice-bar .notice-content,
.notice-bar > text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}
</style>